<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增用户</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/server.js" ></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }
        .avatar {
            width: 78px;
            height: 78px;
            display: block;
        }
    </style>
</head>
<body>
<div id="div">
	<!--
		新增用户
			添加的用户编码(用户名)必须唯一，不能重复
			用户类别从数据库表smbms_role中查询
	-->
    <h4>新增用户</h4>
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="用户编码(账号)" prop="userCode">
            <el-input v-model="addForm.userCode"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
            <el-input v-model="addForm.userName"></el-input>
        </el-form-item>
		<el-form-item label="用户密码" prop="userPassword">
		    <el-input  v-model="addForm.userPassword"></el-input>
		</el-form-item>
		<el-form-item label="性别" prop="gender">
		    <el-radio v-model="addForm.gender" label="1" >男</el-radio>
		    <el-radio v-model="addForm.gender" label="2" >女</el-radio>
		</el-form-item>
		<el-form-item label="出生日期" prop="birthday">
		    <el-date-picker
			  v-model="addForm.birthday"
			  type="date"
			  placeholder="选择日期"
			  value-format="yyyy-MM-dd">
			</el-date-picker>
		</el-form-item>
		<el-form-item label="手机" prop="phone">
		    <el-input  v-model="addForm.phone"></el-input>
		</el-form-item>
		<el-form-item label="地址" prop="address">
		    <el-input  v-model="addForm.address"></el-input>
		</el-form-item>
		<el-form-item label="用户角色" prop="userRole">
		    <el-select v-model="addForm.userRole" placeholder="请选择" >
				<el-option
						v-for="item in userRoleList"
						:key="item.id"
						:label="item.roleName"
						:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
            <el-button @click="resetForm('addForm')">清空</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                addForm: {
                    gender: '1',
					birthday: ''
                },
				userRoleList:[  //用户角色从数据库表中查询,此处数据为测试数据
				],
                rules: {
                    userCode: [{
                    	required: true,
                    	message: '请输入用户编码',
                    	trigger: 'blur'
                    }],
                    userName: [{
                    	required: true,
                    	message: '请输入用户名称',
                    	trigger: 'blur'
                    }]
                }
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
							axios.post(
									server_url + "/servlet/user?method=doAdd",
									"&userCode="+ this.addForm.userCode +
									"&userName="+ this.addForm.userName +
									"&userPassword="+ this.addForm.userPassword +
									"&gender="+ this.addForm.gender +
									"&birthday="+ this.addForm.birthday +
									"&phone="+ this.addForm.phone +
									"&address="+ this.addForm.address +
									"&userRole="+ this.addForm.userRole
							).then(resp=>{
								console.log(resp.data.code);
								//判断结果
								if(resp.data.code == "00"){
									//提示成功消息
									this.$message({
										message: resp.data.msg,
										type: 'success'
									});
									//添加结束后清空表单
									this.$refs[formName].resetFields();
								}else{
									this.$message.error(resp.data.msg);
								}
							}).catch(err=>{
								console.log(err)
							})

                        }
                    });
                },
				queryAllRoles(){  //获取所有的角色
					//发送请求
					axios.get(
							server_url + "/servlet/role?method=doList"
					).then(resp=>{
						//判断结果
						if(resp.data.code == "00"){
							this.userRoleList = resp.data.data;
						}
					}).catch(err=>{
						console.log(err)
					})
				}
            },
			mounted:function(){
            	//页面加载时请求服务端获取用户角色渲染到下拉框中
				this.queryAllRoles();
			}
        }
    );
</script>
</html>